<template>
	<view class="mian">
		<view class="status_bar"></view>
		<view class="top_bg">
			<view class="nav_back">
				<Header color='#fff' title="我的红包"></Header>
				<view @click="yemx" class="yuemx">
					红包记录
				</view>
			</view>
			<!-- 下面的盒子 -->
			<view class="box_he">
				<text class="qian">￥</text><text class="num">{{userinfo.red_money?userinfo.red_money:0}}</text><br>
				<text class="tit">红包余额</text>
			</view>
		</view>
		<view class="wai_box">
			<view class="txje">
				提现金额
			</view>
			<view class="jine">
				<view v-for="(item,index) in list" :key="index" class="jine_son" @click="qie(index)"
					:class="[act==index?'active':' ']">
					{{item.num}}元
				</view>
			</view>

			<!-- !提现方式 -->
			<!-- 提现金额 -->
			<view class="center">
				提现方式
			</view>
			<!-- 支付宝提现 -->
			<view @click="zhifu" class="zhifb">
				<view class="left">
					<image class="img" src="http://img.cpgm.cc/panda/static/my/zfb.png" mode="widthFix"></image>
					<view class="">
						支付宝
					</view>
				</view>
				<view class="right">
					<image src="http://img.cpgm.cc/panda/static/my/you.png" class="duigou" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 立即提现按钮 -->
		<view class="tixian_btn">
			<u-button :plain="true" :hair-line="false" hover-class="none" class="button btn" :throttle-time="1000"
				@click="hbTx()">
				立即提现
			</u-button>
		</view>
		<!-- 温馨提示 -->
		<view class="wenxin">
			<view class="tit">
				温馨提示
			</view>
			<view class="nei">
				<text>1、每个支付宝只能绑定一个平台账号，提现无手续费。</text><br>
				<text>2、每日可提现一次，每次最低2000元。</text><br>
				<text>3、提现时间为9:00-17:00,节假日不休息,18:00左右自动结算</text><br>
				<text>4、如未到账或收款方式填写错误请及时联系官方客服。</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				act: 0,
				show: true,
				list: [{
					num: 2000
				}, {
					num: 3000
				}, {
					num: 5000
				}, {
					num: 10000
				}, ],
				userinfo: uni.getStorageSync('userinfo'),
			};
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			// 请求用户信息接口
			async getUserInfo() {
				this.$getUserInfo.getUserInfo((res) => {
					this.myinfo = res.data
				})
			},
			// 点击提现
			async hbTx() {
				let n = await this.$http.index.redCash({
					money: this.list[this.act].num
				})
				this.$msg(n.msg)
				if (n.code == 1) {
					this.getUserInfo()
				}
			},
			// 点击切换价格
			qie(ind) {
				this.act = ind
			},
			// /点击支付宝提现
			zhifu() {
				this.show = !this.show
				this.$p.navto('/pages/my/paymentMethod')
			},
			// 点击余额明细
			yemx() {
				console.log('1313131');
				this.$p.navto('/pages/my/hongbaolist')
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;

	}

	.mian {
		height: 100vh;
		overflow-y: auto;
		background: linear-gradient(180deg, #FF456B 0%, #FE5C4F 100%);
	}

	.wai_box {
		background-color: #ffedef;
		width: 95%;
		padding: 20px;
		margin: 0 auto;
		border-radius: 8px;
		margin-top: 10px;
	}

	.wenxin {
		padding: 0 20px;
		margin-top: 25px;

		.tit {
			font-size: 16px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #fff;
			margin-bottom: 10px;
		}

		.nei {
			font-size: 13px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #fff;
		}
	}

	.tixian_btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;

		.btn {
			width: 80%;
			height: 57px;
			background: #fff;
			border-radius: 7px;
			text-align: center;
			line-height: 57px;
			font-size: 16px;
			font-weight: bold;
			color: #000;
		}
	}

	.zhifb {
		height: 51px;
		width: 100%;
		border-radius: 5px;
		padding: 0 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;

		.left {
			display: flex;
			align-items: center;

			.img {
				width: 31px;
				height: 31px;
				margin-right: 10px;
			}
		}

		.right {
			width: 17px;
			height: 17px;
			// background-color: #79ddd2;
			// border-radius: 14px;

			.duigou {
				width: 10px;
				height: 12px;
				margin-left: 50%;
				margin-top: 50%;
				transform: translate(-50%, -50%);
			}
		}

	}

	.txje {
		// padding: 0 20px;
		font-size: 14px;
		font-family: SourceHanSansCN-Bold, SourceHanSansCN;
		font-weight: bold;
		color: #343434;
		margin-bottom: 10px;
		// margin-top: -40px;
	}

	.jine {
		// padding: 0 20px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.jine_son {
			width: 30%;
			height: 44px;
			background-color: #fff;
			margin-bottom: 20px;
			border-radius: 10px;
			text-align: center;
			line-height: 44px;
			font-size: 14px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #FF456B;

			border: 1px solid #FED0CD;
		}

		.active {
			color: #fff;
			background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		}
	}

	.yue {
		padding: 0 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15px;

		.top {
			font-size: 14px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #131314;
		}

		.money {
			font-size: 29px;
			font-family: SourceHanSansCN-Bold, SourceHanSansCN;
			font-weight: bold;
			color: #131314;
		}

		.img {
			width: 72px;
			height: 81px;
		}
	}

	.top_bg {
		// height: 350rpx;
		width: 100%;
		position: relative;
		top: 0;
		left: 0;
		// background: linear-gradient(1deg, rgba(255, 134, 125, 0) 0%, rgba(255, 134, 125, 0) 9%, #FC5048 100%);
		// padding: 50px 0;


		.box_he {
			text-align: center;
			margin-top: 30px;

			.qian {
				font-size: 23px;
				font-family: Futura-Bold, Futura;
				font-weight: bold;
				color: #FFFFFF;
			}

			.num {
				font-size: 36px;
				font-family: Futura-Bold, Futura;
				font-weight: bold;
				color: #FFFFFF;
			}

			.tit {
				font-size: 13px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FCD5E6;
				margin-top: 30px;
			}
		}

		.nav_back {
			position: relative;

			.yuemx {
				position: absolute;
				right: 8%;
				top: 40%;
				font-size: 14px;
				font-weight: 500;
				color: #fff;
				z-index: 999;
			}
		}
	}

	.center {
		font-size: 14px;
		font-weight: bold;
		color: #343434;
		margin: 10px 0;
	}
</style>